<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
		<style type="text/css">
			body{
				font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
			}
			
			#right{
			    min-width: 973px;
			    height: 500px;
			    margin-left: 10px;
			    float: left;
			}
			#div1_0{
			    width: 1334px;
			    height: 55px;
			    padding-top: 15px;
    			padding-bottom: 15px;
			}
			.div1_1{
			    width: 257px;
			    height: 70px;
			    line-height: 70px;
			    padding-right: 15px;
			    padding-left: 15px;
			    font-size: 14px;
			    float: left;
			}
			.input1{
				width: 182px;
				height: 34px;
				line-height: 1.3;
				border-width: 1px;
			    border-style: solid;
			    background-color: #fff;
			    border-radius: 2px;
			    border-color: #e6e6e6;
			    color: rgb(204,204,214);
			    padding-left: 10px;
			}
			
			#layui-inline{
				margin-top: 16px;
				margin-left: -50px;
			}
			#layui-inline1{
				margin-top: 12px;
				margin-left: 16px;
			}
			
			
			.div0{
				width: 100%;
				border-top: 1px solid #f6f6f6;
				padding-bottom: 10px;
			}
			.div0-0{
				height: 38px;
			    line-height: 38px;
			    padding: 0 18px;
			    background-color: #009688;
			    color: #fff;
			    white-space: nowrap;
			    text-align: center;
			    font-size: 14px;
			    border: none;
			    border-radius: 2px;
			    cursor: pointer;
			}
			
			
			#b1{
			    color: #eab67c!important;
			    border: 1px solid #eab67c!important;
			    width: 68px;
			    height: 26px;
			    font-size: 12px;
			    border-radius: 3px;
			}
			#text{
			    width: 200px !important;
			    height: 17px;
			    font-size: 13px;
			    color: #34495e;
			    border: 1px solid #bdc3c7;
			    border-radius: 3px;
			}
			
			#div1_1_1{
			    width: 314px;
			    height: 70px;
			    float: left;
			    padding-right: 15px;
			    padding-left: 15px;
			    line-height: 70px;
			}
			.left{
			    background-color: #3d4e60;
			    border-right: 4px solid #647f9d;
			    color: #fff;
			}
			.del{
			    width: 42px;
			    height: 24px;
			    border: 0px solid black;
			    border-radius: 3px;
			    color: #fff;
			    background-color: #FF5722;
			    font-size: 12px;
			    font-weight: 400;
			    cursor:pointer;
			}
			.update{
			    width: 42px;
			    height: 24px;
			    border: 0px solid black;
			    border-radius: 3px;
			    color: #fff;
			    background-color: #1E9FFF;
			    font-size: 12px;
			    font-weight: 400;
			    margin-left: 4px;
			    cursor:pointer;
			}
			#tab{
				border-width: 1px;
			    border-style: solid;
			    border-color: #e6e6e6;
			    border-collapse:collapse;
			    border-right:1px solid #e6e6e6;
			    border-bottom:1px solid #e6e6e6;
			    color: #666;
			}
			#tab th{
				text-align: left;
			    width: 223px;
			    height: 28px;
			    line-height: 28px;
			    padding: 5px 15px;
			    font-weight: 400;
			    background-color: #f2f2f2;
			    border-left:1px solid #e6e6e6;
			    border-top:1px solid #e6e6e6;
			}
			#tab td{
			    width: 223px;
			    text-align: left;
			    padding: 10px;
			    padding-left: 15px;
			    border-left:1px solid #e6e6e6;
			    border-top:1px solid #e6e6e6;
			}
			#tab tr:hover{
				background-color: #f2f2f2;
			}
			
			#tj{
				display: none;
				position: fixed;
				top: 0px;
				left: 0px;
			    width: 1920px;
			    height: 910px;
			    background: rgba(0, 0, 0,0.3);
			    color: #666;
			}
			
			#tj_1{
				position: fixed;
				 width: 420px;
				  height: 450px;
				   top: 23.5px;
				    left: 750px;
				    background: white;
			}
			
			#tj_1_1{
				/*width: 100%;*/
				height: 50px;
			    line-height: 50px;
			    border: 0;
			    background-color: #20222A;
			    color: #fff;
			    padding: 0 0px 0 20px;
			}
			#tj_1_2{
				width: 420px;
				height: 287px;
				padding-left: 75px;
				padding-top: 24px;
			}
			#tjbtn{
				width: 64px;
				height: 38px;
			    line-height: 38px;
			    padding: 0 18px;
			    background-color: #009688;
			    color: #fff;
			    white-space: nowrap;
			    text-align: center;
			    font-size: 14px;
			    border: none;
			    border-radius: 2px;
			    cursor: pointer;
			    margin-left: 130px;
			}
			
			.icon_false {
			    display: inline-block;
			    width: 14px;
			    height: 2px;
			    background: #fff;
			    line-height: 0;
			    font-size: 0;
			    vertical-align: middle;
			    -webkit-transform: rotate(45deg);
			}
			
			.icon_false:after {
			    content: '/';
			    display: block;
			    width: 14px;
			    height: 2px;
			    background: #fff;
			    -webkit-transform: rotate(-90deg);
			}  

			
			
			
			
			
			#xg{
			    display: none;
				position: fixed;
				top: 0px;
				left: 0px;
			    width: 1920px;
			    height: 910px;
			    background: rgba(0, 0, 0,0.3);
			    color: #666;
			}
			#xg_1{
				position: fixed;
				 width: 420px;
				  height: 450px;
				   top: 23.5px;
				    left: 750px;
				    background: white;
			}
			
			#xg_1_1{
				/*width: 100%;*/
				height: 50px;
			    line-height: 50px;
			    border: 0;
			    background-color: #20222A;
			    color: #fff;
			    padding: 0 0px 0 20px;
			}
			#xg_1_2{
				width: 420px;
				height: 232px;
				padding-left: 75px;
				padding-top: 24px;
			}
			#xgbtn{
				width: 64px;
				height: 38px;
			    line-height: 38px;
			    padding: 0 18px;
			    background-color: #009688;
			    color: #fff;
			    white-space: nowrap;
			    text-align: center;
			    font-size: 14px;
			    border: none;
			    border-radius: 2px;
			    cursor: pointer;
			    margin-left: 130px;
			}
			.btn{
				height: 22px;
			    line-height: 22px;
			    padding: 0 5px;
			    font-size: 12px;
			    border: 1px solid #C9C9C9;
			    background-color: #fff;
			    color: #555;
			    border-radius: 2px;
			    cursor: pointer;
			}
			
		</style>
		<script src="/bck/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		22
		<div id="right">
			<div id="yh1"><!--用户-->
				<div id="div1">
					<div id="div1_0">
						
						<div class="div1_1">登录名<input type="text" class="input1" value="" placeholder="请输入" style="margin-left: 17px;" /></div>
						<div class="div1_1">手机<input type="text" class="input1" value="" placeholder="请输入" style="margin-left: 17px;" /></div>
						<div class="div1_1">邮箱<input type="text" class="input1" value="" placeholder="请输入" style="margin-left: 17px;" /></div>
						<form class="layui-form" action="">
							<div id="layui-inline" class="layui-inline">
					          <label class="layui-form-label">角色</label>
					          <div class="layui-input-block">
					            <select name="role">
					              <option value="0">管理员</option>
					              <option value="1">超级管理员</option>
					              <option value="2">纠错员</option>
					              <option value="3">采购员</option>
					              <option value="4">推销员</option>
					              <option value="5">运营人员</option>
					              <option value="6">编辑</option>
					            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="管理员" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="0" class="layui-this">管理员</dd><dd lay-value="1" class="">超级管理员</dd><dd lay-value="2" class="">纠错员</dd><dd lay-value="3" class="">采购员</dd><dd lay-value="4" class="">推销员</dd><dd lay-value="5" class="">运营人员</dd><dd lay-value="6" class="">编辑</dd></dl></div>
					          </div>
					        </div>
					        <div id="layui-inline1" class="layui-inline">
				          		<button class="layui-btn layuiadmin-btn-admin" lay-submit="" lay-filter="LAY-user-back-search">
				            	<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
				            </button>
				        </div>
				        </form>
				        
					</div>
					<div class="div0">
						<button class="div0-0">删除</button>
						<button class="div0-0" id="ttjj">添加</button>
						
					</div>
					
					
					<div id="div1_2">
						<table id="tab">
							<th>标题</th>
							<th>登录名</th>
							<th>手机</th>
							<th>邮箱</th>
							<th>角色</th>
							<th>加入时间</th>
							<th >审核状态</th>
							<th>操作</th>
						</table>
					</div>
					
					
				</div>
			</div>
			<div id="tj"><!--添加-->
				
				<div id="tj_1">
					<div id="tj_1_1">
						添加管理员<div id="tj_1_1_1" style="display: inline-block; margin-left: 305px;cursor: pointer;"><i class="icon_false" ></i></div>
							
					</div>
					<div id="tj_1_2">
						<div class="div1_1" style="margin-left: -14px;height: 38px;margin-bottom: 15px;">登录名<input id="login_name" type="text" class="input1" value="" placeholder="请输入用户名" style="margin-left: 17px;" /></div>
						<div class="div1_1" style="margin-left: 1px;height: 38px;margin-bottom: 15px;">密码<input id="pwd" type="text" class="input1" value="" placeholder="请输入密码" style="margin-left: 17px;" /></div>
						<div class="div1_1" style="height: 38px;margin-bottom: 15px;">手机<input id="phone" type="text" class="input1" value="" placeholder="请输入号码" style="margin-left: 17px;" /></div>
						<div class="div1_1" style="height: 38px;margin-bottom: 15px;">邮箱<input id="mailbox" type="text" class="input1" value="" placeholder="请输入邮箱" style="margin-left: 17px;" /></div>
						<form class="layui-form" action="">
							<div id="layui-inline" class="layui-inline">
					          <label class="layui-form-label">角色</label>
					          <div class="layui-input-block">
					            <select name="role" lay-filter="test">
					              <option value="管理员">管理员</option>
					              <option value="超级管理员">超级管理员</option>
					              <option value="纠错员">纠错员</option>
					              <option value="采购员">采购员</option>
					              <option value="推销员">推销员</option>
					              <option value="运营人员">运营人员</option>
					              <option value="编辑">编辑</option>
					            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="管理员" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="0" class="layui-this">管理员</dd><dd lay-value="1" class="">超级管理员</dd><dd lay-value="2" class="">纠错员</dd><dd lay-value="3" class="">采购员</dd><dd lay-value="4" class="">推销员</dd><dd lay-value="5" class="">运营人员</dd><dd lay-value="6" class="">编辑</dd></dl></div>
					          </div>
					       </div>
				        </form>
					</div>
					<div id="tj_1_3">
						<button id="tjbtn">确认</button>
					</div>
				</div>
				
			</div>
			
			<div id="xg"><!--修改-->
				
				<div id="xg_1">
					<div id="xg_1_1">
						编辑管理员<div id="xg_1_1_1" style="display: inline-block; margin-left: 305px;cursor: pointer;"><i class="icon_false" ></i></div>
							
					</div>
					<div id="xg_1_2">
						<div class="div1_1" style="margin-left: -14px;height: 38px;margin-bottom: 15px;">登录名<input type="text" id="xgdl" class="input1" value="" placeholder="请输入" style="margin-left: 17px;" /></div>
						<div class="div1_1" style="height: 38px;margin-bottom: 15px;">手机<input type="text" id="xgsj" class="input1" value="" placeholder="请输入" style="margin-left: 17px;" /></div>
						<div class="div1_1" style="height: 38px;margin-bottom: 15px;">邮箱<input type="text" id="xgyx" class="input1" value="" placeholder="请输入" style="margin-left: 17px;" /></div>
						<form class="layui-form" action="">
							<div id="layui-inline" class="layui-inline">
					          <label class="layui-form-label">角色</label>
					          <div class="layui-input-block">
					            <select id="xgsel" name="role"  lay-filter="test1">
					              <option value="管理员">管理员</option>
					              <option value="超级管理员" selected>超级管理员</option>
					              <option value="纠错员" >纠错员</option>
					              <option value="采购员">采购员</option>
					              <option value="推销员">推销员</option>
					              <option value="运营人员">运营人员</option>
					              <option value="编辑">编辑</option>
					            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="管理员" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="0" class="layui-this">管理员</dd><dd lay-value="1" class="">超级管理员</dd><dd lay-value="2" class="">纠错员</dd><dd lay-value="3" class="">采购员</dd><dd lay-value="4" class="">推销员</dd><dd lay-value="5" class="">运营人员</dd><dd lay-value="6" class="">编辑</dd></dl></div>
					          </div>
					       </div>
				        </form>
					</div>
					<div id="xg_1_3">
						<button id="xgbtn">确认</button>
					</div>
				</div>
				
			</div>
			
		</div>
		<button onclick="btn()">按钮</button>
		<script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function btn(){
				alert({{$ycz}});
			}
			
			
			var role;
			var role1;
			layui.use('form',
				function() {
					form = layui.form;
				
					//各种基于事件的操作，下面会有进一步介绍
					form.on('select(test)', function(data){
					  	role = data.value;
					  	console.log(role);
					});
					form.on('select(test1)', function(data){
					  	role1 = data.value;
					  	console.log(role1);
					});
				});
				
			
			$(document).ready(function(){
				$("#ttjj").click(function(){//添加
					$("#tj").css("display", "block");
					//$("#tj").css("z-index", "19891022");
				});
				$("#tjbtn").click(function(){
					$("#tj").css("display", "none");
					//$("#tj").css("z-index", "-19891022");
				});
				$("#tj_1_1_1").click(function(){
					$("#tj").css("display", "none");
				});
				
				
				$("#xgbtn").click(function(){
					$("#xg").css("display", "none");
				});
				$("#xg_1_1_1").click(function(){
					$("#xg").css("display", "none");
				});
				
				
				
			    
			    $('#tjbtn').click(function(){//添加
			        var p=$('#phone').val();
			        var n=$('#login_name').val();
			        var pw=$('#pwd').val();
			        var m=$('#mailbox').val();
			        var r=role;
			        $.ajax({
			            type:"post",
			            url:"/add.php",
			            data:{
			                phone:p,
			                login_name:n,
			                pwd:pw,
			                mailbox:m,
			                role:r
			            },
			            success:function(mgs){
			                console.log(pw);
			                if(mgs=="已存在"){
			                    alert(mgs);
			                }
			            }
			        });
    			});

			    var uid=1;
			    $('#xgbtn').click(function(){//修改
			        var p=$('#xgsj').val();
			        var n=$('#xgdl').val();
			        var m=$('#xgyx').val();
			        var r=role1;
			        $.ajax({
			            type:"post",
			            url:"/modification.php",
			            data:{
			            	uid:uid,
			                phone:p,
			                login_name:n,
			                mailbox:m,
			                role:r
			            },
			            success:function(mgs){
			                //console.log(mgs);
			                $('[uid='+uid+']').parent().parent().children().eq(1).text(n);
			                $('[uid='+uid+']').parent().parent().children().eq(2).text(p);
			                $('[uid='+uid+']').parent().parent().children().eq(3).text(m);
			                $('[uid='+uid+']').parent().parent().children().eq(4).text(r);
			                console.log(uid);
			            }
			        });
    			});





			    var th='<tr>'+"<th>ID</th><th>登录名</th><th>手机</th><th>邮箱</th><th>角色</th><th>加入时间</th><th style='text-align: center;'>审核状态</th>"+'<th>用户</th>'+'<th>密码</th>'+'<th>操作</th>'+'</tr>';
			
			    $.ajax({
			        type:"get",
			        url:"/register.php",
			        data:{
			            page:1
			        },
			        dataType:'json',
			        success:function(mgs){
			            console.log(mgs);
			            var data=mgs.data;
			            var count=mgs.count;
			            var html='';
			            for (var i in data) {
			                html+="<tr>";
			                for (var d in data[i]) {
			                    if(d=='uid')
			                    {
			                        html+="<td>100"+data[i][d]+"</td>"
			                        continue;
			                    }
			                    if(d=='time')
			                    {
			                        html+="<td>"+data[i][d]+"</td><td style='text-align: center;'><button class='btn'>未审核</button></td>"
			                        continue;
			                    }
			                    html+="<td>"+data[i][d]+"</td>"
			                }
			                html+='<td style="text-align: center;"><button class="del" name="del" uid='+data[i]['uid']
			                    +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
			                    +'">编辑</button></td></tr>';
			            }
			            $('#tab').html(th+html);
			            $('.del').click(function(){//删除
			                var btn_this=$(this);
			                $.ajax({
			                    type:"post",
			                    url:"/delete.php",
			                    data:{
			                        uid:$(this).attr('uid')
			                    },
			                    success:function(mgs){
			                        btn_this.parent().parent().remove();
			                    }
			                });
			            });
			
			            $('.update').click(function(){//修改
			                uid=$(this).attr('uid');
			                $("#xg").css("display", "block");
			                $("#xgdl").val($(this).parent().parent().children().eq(1).text());
			                $("#xgsj").val($(this).parent().parent().children().eq(2).text());
			                $("#xgyx").val($(this).parent().parent().children().eq(3).text());
			                
			                /*for (var a=0;a<$("#xgsel>option").length;a++) 
			                {
			                	if($("#xgsel>option").eq(a).text()===$(this).parent().parent().children().eq(4).text())
			                	{
			                		$("#xgsel>option").eq(a).remove();
			                		$("#xgsel>option").eq(a-1).after("<option selected>"+$(this).parent().parent().children().eq(4).text()+"</option>")
			                		//$("#xgsel>option").eq(a).attr("selected","");
			                		//$("#d").attr("selected","")
			                	}
			                }*/
			            });
			            /*//查看*/
			            $('#b2').click(function(){
			                var txt=$('#text').val();
			                console.log(txt);
			                var html1='';
			                for (var i in data) {
			                    for (var d in data[i]) {
			                        if((data[i][d]).indexOf(txt)!=-1){
			                            html1+="<tr><td>1001</td><td>common-1</td><td>11111</td><td>111@qq.com</td><td>超级管理员</td><td>20150217</td><td style='text-align: center;'><button class='btn'>未审核</button></td>";
			                            for (var j in data[i]) {
			                                if(j=='uid')
			                                {
			                                    continue;
			                                }
			                                html1+="<td>"+data[i][j]+"</td>"
			                            }//3.添加功能按钮
			                            html1+='<td><button class="del" name="del" uid='+data[i]['uid']
			                                +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
			                                +'">修改</button></td></tr>';break;
			                        }
			                    }
			                }
			                $('#tab').html(th+html1);
			                $('.del').click(function(){//删除
			                    var btn_this=$(this);
			                    $.ajax({
			                        type:"post",
			                        url:"/delete.php",
			                        data:{
			                            uid:$(this).attr('uid')
			                        },
			                        success:function(mgs){
			                            //console.log(mgs);
			                            btn_this.parent().parent().remove();
			                        }
			                    });
			                });
			
			                $('.update').click(function(){//修改
			                    $("#xg").css("display", "block");
			                    uid=$(this).attr('uid');
			                });
			            });
			            /*//查看*/
			            var s='';
			            for (var i=1;i<=count;i++){
			                s+="<option value='"+i+"'>"+i+"</option>";
			            }
			            $('#select').html(s);
			            $('#select').after("页"+" 共"+count+"页");
			        }
			    });
			    $("#select").change(function(){
			        var val=$("#select>option:selected").val();//也可以用#slt1>option:checked, 获取到下拉框被选中的option的 value值
			        console.log(val);
			        $.ajax({
			            type:"get",
			            url:"/register.php",
			            data:{
			                page:val
			            },
			            dataType:'json',
			            success:function(mgs){
			                console.log(mgs);
			                var data=mgs.data;
			                var count=mgs.count;
			                var html='';
			                for (var i in data) {
			                    html+="<tr>";
			                    for (var d in data[i]) {
			                        if(d=='uid')
			                        {
			                            continue;
			                        }
			                        html+="<td>"+data[i][d]+"</td>"
			                    }
			                    html+='<td><button class="del" name="del" uid='+data[i]['uid']
			                        +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
			                        +'">修改</button></td></tr>';
			                }
			                $('#tab').html(th+html);
			                $('.del').click(function(){//删除
			                    var btn_this=$(this);
			                    $.ajax({
			                        type:"post",
			                        url:"/delete.php",
			                        data:{
			                            uid:$(this).attr('uid')
			                        },
			                        success:function(mgs){
			                            //console.log(mgs);
			                            btn_this.parent().parent().remove();
			                        }
			                    });
			                });
			
			                $('.update').click(function(){//修改
			                    $("#xg").css("display", "block");
			                    uid=$(this).attr('uid');
			                });
			                /*//查看*/
			                $('#b2').click(function(){//查看
			                    var txt=$('#text').val();
			                    console.log(txt);
			                    var html1='';
			                    for (var i in data) {
			                        for (var d in data[i]) {
			                            if((data[i][d]).indexOf(txt)!=-1){
			                                html1+="<tr>";
			                                for (var j in data[i]) {
			                                    if(j=='uid')
			                                    {
			                                        continue;
			                                    }
			                                    html1+="<td>"+data[i][j]+"</td>"
			                                }//3.添加功能按钮
			                                html1+='<td><button class="del" name="del" uid='+data[i]['uid']
			                                    +'>删除</button><button class="update"  name="update" uid="'+data[i]['uid']
			                                    +'">修改</button></td></tr>';break;
			                            }
			                        }
			                    }
			                    $('#tab').html(th+html1);
			                    $('.del').click(function(){//删除
			                        var btn_this=$(this);
			                        $.ajax({
			                            type:"post",
			                            url:"/delete.php",
			                            data:{
			                                uid:$(this).attr('uid')
			                            },
			                            success:function(mgs){
			                                //console.log(mgs);
			                                btn_this.parent().parent().remove();
			                            }
			                        });
			                    });
			
			                    $('.update').click(function(){//修改
			                        $("#xg").css("display", "block");
			                        uid=$(this).attr('uid');
			                    });
			                });
			            }
			        });
			    });
			
			});
		</script>
	</body>
</html>

